<template>
    <view class="modal" @touchmove.native.stop.prevent>
        <view class="mask" v-if="show" @click="closeMask"></view>
        <view
            class="modal-content"
            :class="noPadding?'noPadding':''"
            v-if="show"
            :style="{height:minHeight?'':height,'min-height':height,top:top,'background-color': bgColor,'border-radius': bdRadius}"
        >
            <view class="modal-title" v-show="title">{{title}}</view>
            <view
                class="main-content"
                :class="{ 'noOverFlow': noOverFlow, 'overFlowVisible': overFlowVisible}"
            >
                <slot></slot>
            </view>
        </view>
    </view>
</template>

<script>
    export default{
    	props: {
    		show: {
    			type: Boolean,
    			default: false
    		},
    		height:{
    			type: String,
    			default: '521rpx'
    		},
    		title:{
    			type:String,
    			default:''
    		},
    		noPadding:{
    			type: Boolean,
    			default: false
    		},
    		noOverFlow:{
    			type: Boolean,
    			default: false
    		},
    		overFlowVisible:{//超出内容不隐藏
    			type: Boolean,
    			default: false
    		},
    		top:{//弹框距离顶部的距离
    			type:String,
    			default:'20%'
    		},
    		bgColor:{//弹框背景颜色
    			type:String,
    			default:'#fff'
    		},
    		minHeight: {//开启最小高度为521rpx，不限制弹框高度
    			type: Boolean,
    			default: false
    		},
			bdRadius:{//圆角
				type:String,
				default:'10rpx'
			}
    	},
    	data() {
    		return {
    		}
    	},
    	methods:{
    		closeMask(){
    			this.$emit('closeModal')
    		}
    	}
    }
</script>

<style lang="scss" scoped>
    .mask{
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgba(0,0,0,0.4);
      z-index: 9000;
    }

    .modal-content{
      position: fixed;
      left: 10%;
      display: flex;
      flex-direction: column;
      width: 605rpx;
      /* height: 80%; */
      padding: 0 37rpx;
      z-index: 9500;
      &.noPadding{
    	  padding: 0;
      }
    }
    .modal-title{
    	height: 118rpx;
    	font-size: 46rpx;
    	color: $text-cbh-title;
    	text-align: center;
    	border-bottom: 1px solid $border-cbh-color;
    	padding: 38rpx 0 26rpx;
    }
    .main-content{
      flex: 1;
      height: 100%;
      overflow-y: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      &.noOverFlow{
    	  overflow-y: auto;
      }
      &.overFlowVisible{
    	  overflow-y: visible;
      }
    }
</style>
